/*
 * @Author: keledd
 * @Date: 2021-10-29 16:33:11
 * @LastEditors: keledd
 * @LastEditTime: 2021-10-29 16:33:12
 * @FilePath: /blog/letter/src/views/letter/intex.ts
 */
<!-- 写信 -->
<template>
  <div class="letter">
    <img class="cancel" src="../../assets/cancel.png" @click="$emit('handleCancel')">
    <textarea id="letter-text-area"></textarea>
  </div>
</template>

<script lang='ts'>
import { reactive, toRefs, onBeforeMount, onMounted } from 'vue'
interface DataProps { }
export default {
  name: '',
  setup() {
    console.log('1-开始创建组件-setup')
    const data: DataProps = reactive({

    })
    onBeforeMount(() => {
      console.log('2.组件挂载页面之前执行----onBeforeMount')
    })
    onMounted(() => {
      console.log('3.-组件挂载到页面之后执行-------onMounted')
    })
    const refData = toRefs(data);
    return {
      ...refData,
    }

  }
};
</script>
<style scoped lang="scss">
    .letter{
        background-image: url('../../assets/letter-paper.png');
        background-size: 100%;
        position: absolute;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;

        .cancel{
            position: absolute;
            left: 10px;
            top: 10px;
            width: 30px;
        }

        #letter-text-area{
            width: 80%;
            height: 80%;
            background-color: transparent;
            border: unset;
            line-height: 40px;
            text-decoration: underline;
            font-family: 'kfont';
            font-size: 18px;
            &:focus-visible{
                outline: unset;
            }
        }
    }
</style>
<style>
    @font-face {
        font-family: "kfont";
        src: url('../../assets/font/font.ttf');
    }
</style>